<template>
	<div class="material">
		<div style=" width: 100%;display: flex;justify-content: space-between;">
			<div>
				<el-button type="primary" plain @click="add">添加资料</el-button>
			</div>
			<!-- 条件查询 -->
			<div style="display: flex;">
				<el-input v-model="materialForm.title" placeholder="按标题查询" @change="onSubmit"
					style="margin-left: 10px;">
				</el-input>
				<el-select v-model="materialForm.type" placeholder="按类型查询" @change="onSubmit"
					style="margin-left: 10px;">
					<el-option v-for="(item, index) in materiaType" :key="index" :label="item.label"
						:value="item.value">
					</el-option>
				</el-select>
				<el-button @click="reset" style="margin-left: 10px;" v-debounce>
					重置
				</el-button>
			</div>
		</div>
		<div class="material-table">
			<el-table :data="tableData" v-loading="loading" border stripe style="width: 100%" height="100%">
				<el-table-column prop="i" label="序号" fit width="50" fixed> </el-table-column>
				<el-table-column prop="type" label="类型" fit width="80"></el-table-column>
				<el-table-column prop="title" label="标题" fit></el-table-column>
				<el-table-column label="图片" fit width="115">
					<template slot-scope="scope">
						<el-image v-if="scope.row.imageUrl.length > 0" :src="scope.row.imageUrl[0]"
							style="width: 90px; height: 90px;" :preview-src-list="scope.row.imageUrl">
						</el-image>
						<span v-else>暂无图片</span>
					</template>
				</el-table-column>
				<el-table-column label="视频" fit width="100">
					<template slot-scope="scope">
						<el-button v-if="scope.row.videoUrl !== '' && scope.row.videoUrl !== null" type="text"
							@click="playVideo(scope.row)">播放视频</el-button>
						<span v-else>暂无视频</span>
					</template>
				</el-table-column>
				<el-table-column prop="viewCount" label="浏览次数" fit width="100"></el-table-column>
				<el-table-column prop="userName" label="发布人" fit width="100"></el-table-column>
				<el-table-column prop="createTime" label="发布时间" fit></el-table-column>
				<el-table-column label="操作" width="180" fixed="right">
					<template slot-scope="scope">
						<div style="display: flex">
							<el-button @click="learnRecordList(scope.row)" type="text" size="mini">
								学习记录
							</el-button>
							<el-divider direction="vertical"></el-divider>
							<el-button @click="editGoods(scope.row)" type="text" size="mini">
								详情
							</el-button>
							<el-divider direction="vertical"></el-divider>
							<el-button @click="deleteGoods(scope.row.id)" type="text" size="mini" v-if="root">
								删除
							</el-button>
						</div>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
				:current-page="currentPage" :page-sizes="[20, 50, 100]" :page-size="pageSize"
				layout="total, sizes, prev, pager, next, jumper" :total="total">
			</el-pagination>
		</div>
		<!-- 播放视频 -->
		<el-dialog style="margin-top:0" :visible.sync="playVideoShow" width="60%" :title="material.title"
			@close="closeDialog">
			<video width="100%" height="450px" :src="material.videoUrl" controls></video>
		</el-dialog>

		<el-dialog :visible.sync="logDialogShow" width="60%" title="学习记录">
			<div style="max-height: 80%;overflow: scroll">
				<el-table :data="logData" style="width: 100%;">
					<el-table-column prop="nickName" label="姓名" width="180">
					</el-table-column>
					<el-table-column prop="count" label="次数" width="180">
					</el-table-column>
				</el-table>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import apiURL from "../../../api/apiURL.js"
import companyCulture from "../../../api/companyCulture.js";
import api from "../../../api/companyCulture.js"
export default {
	components: {},
	data() {
		return {
			root: false,
			buttonValue: '点击上传',
			buttonType: 'primary',
			uploadSuccess: false,
			videoUploadPercent: 0,
			videoFlag: false,
			uploadVideo: apiURL.VIDEO_URL, // 视频上传地址
			// 表格加载
			loading: true,
			//表格数据
			tableData: [],
			READ_IMG_URL: apiURL.READ_IMG_URL, // 读取图片地址
			// 模糊查询
			materialForm: {
				title: '', //标题
				type: null, //类型
				userName: '' // 发布人
			},
			material: {
				title: '', //标题
				videoUrl: '', // 视频地址
			},
			playVideoShow: false,
			commentTitle: '',
			commentList: [],
			commentShow: false,
			//总条数
			total: 0,
			// 分页大小
			pageSize: 50,
			//记录当前页数
			currentPage: 1,
			// 类型
			materiaType: [{
				label: '学习资料',
				value: 0
			},
			{
				label: '培训视频',
				value: 1
			},
			{
				label: '会议视频',
				value: 2
			},
			{
				label: '公司介绍',
				value: 3
			},
			{
				label: '管理制度',
				value: 4
			}
			],
			logDialogShow: false,
			logData: new Array()
		};
	},
	mounted() {
		const userInfo = JSON.parse(localStorage.getItem("userInfo"));
		if (userInfo.roleId == '1') {
			this.root = true;
		}
		this.getMaterialList()
	},
	methods: {
		// 重置
		reset() {
			this.currentPage = 1
			this.pageSize = 10
			this.materialForm.title = ''
			this.materialForm.type = null
			this.getMaterialList()
		},
		// 模糊查询
		onSubmit() {
			this.currentPage = 1
			this.pageSize = 10
			this.getMaterialList();
		},
		// 添加
		add() {
			this.$router.push({
				path: "/companyCulture/material/editMaterial",
				params: {
					type: 0
				}
			})
		},
		// 查询列表
		getMaterialList() {
			this.loading = true
			let data = {
				title: this.materialForm.title,
				type: this.materialForm.type,
				currentPage: this.currentPage,
				pageSize: this.pageSize
			}
			api.getMaterialList(data).then(res => {
				this.loading = false
				if (res.code === 200) {
					this.tableData = new Array()
					//console.log("资料列表==>",res.data.materialList)
					if (res.data.materialList.length === 0) {
						return
					}
					this.total = res.data.total
					this.tableData = res.data.materialList.map((item, index) => {
						let images = []
						if (item.imageUrl !== null) {
							item.imageUrl.forEach(image => {
								images.push(this.READ_IMG_URL + image)
							})
						}
						let data = ''
						this.materiaType.forEach(type => {
							if (type.value === item.type) {
								data = type.label
							}
						})
						return {
							i: (this.currentPage - 1) * this.pageSize + index + 1,
							id: item.id,
							title: item.title,
							content: item.content,
							imageUrl: images,
							videoUrl: item.videoUrl,
							type: data,
							viewCount: item.viewCount,
							userName: item.nikeName,
							createTime: item.createTime
						}
					})
					this.loading = false
					//console.log("资料列表==>", this.tableData)
				}
			})
		},
		// pageSize变化
		handleSizeChange(pageSize) {
			this.pageSize = pageSize
			this.getMaterialList()
		},
		// 页码变化
		handleCurrentChange(curPage) {
			this.currentPage = curPage
			this.getMaterialList()
		},
		// 详情
		editGoods(item) {
			this.$router.push({
				path: "/companyCulture/material/editMaterial"
			})
			localStorage.setItem("materialId", item.id)
		},
		// 删除
		deleteGoods(id) {
			this.$confirm('此操作将永久删除该资料, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				const data = {
					id: id
				}
				api.deleteMaterial(data).then(res => {
					if (res.code === 200) {
						this.$message.success("删除成功！")
						this.currentPage = 1;
						this.pageSize = 10;
						this.getMaterialList();
					} else {
						this.$message.error("删除失败！")
					}
				})
			})

		},
		// 播放视频
		playVideo(item) {
			console.log("item==>", item)
			this.material.title = item.title;
			this.material.videoUrl = apiURL.READ_VIDEO_URL + item.videoUrl;
			//console.log("视频地址==>", this.material.videoUrl)
			this.playVideoShow = true;
		},
		// 关闭视频
		closeDialog() {
			this.material.title = '';
			this.material.videoUrl = '';
			this.playVideoShow = false;
		},
		learnRecordList(value) {
			const data = {
				materialId: value.id,
			}
			this.logDialogShow = true
			companyCulture.getLearnRecordGropList(data).then(res => {
				this.logData = res.data.learnRecordVoList.flat()
			})
		}
	},
};
</script>

<style scoped>
.page {
	text-align: center;
}

.material {
	height: 100%;
}

.material-table {
	height: 94%;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: center;
	margin-top: 10px;
}
</style>